<template>
    <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
      <span style="line-height:60px;font-size:20px;">账单明细</span>
    </div>
    <!-- 账户搜索 -->
    <el-card style="margin:20px;height: 120px;">
      <el-form :inline="true" @keydown.enter="loadExpend">
        <el-form-item label="姓名">
          <el-input placeholder="请输入内容" style="width:220px;" v-model="selectExpendForm.username"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input placeholder="请输入内容" style="width:220px;" v-model="selectExpendForm.goodsId"></el-input>
        </el-form-item>
        <el-form-item label="服务员" style="width:290px;">
          <el-input placeholder="请输入内容" style="width:220px;" v-model="selectExpendForm.empId"></el-input>
        </el-form-item>
        <el-form-item label="收款方式" style="width:290px;">
          <el-input placeholder="请输入内容" style="width:220px;" v-model="selectExpendForm.paymentTerm"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="selectExpendForm.createTime"
            type="date"
            placeholder="选择日期"
            style="width:220px;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadExpend">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 账户列表 -->
    <el-card style="margin:20px;">
      <el-table :data="expendArr">
        <el-table-column type="index" label="编号" width="80" align="center"/>
        <el-table-column prop="username" label="老人姓名" align="center"/>
        <el-table-column prop="goodsId" label="商品" align="center"/>
        <el-table-column prop="empId" label="职工" align="center"/>
        <el-table-column prop="amountReceived" label="应收金额" align="center"/>
        <el-table-column prop="fundsReceived" label="实收金额" align="center"/>
        <el-table-column prop="paymentTerm" label="收款方式" align="center"/>
        <el-table-column prop="createTime" label="消费时间" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="editVehicle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
</template>

<script setup>

//定义加载账户的方法
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";

//定义对象用来保存消费查询表单数据
const selectExpendForm = ref({
  username: "",
  goodsId: "",
  empId: "",
  paymentTerm: "",
  createTime: ""
});
//定义对象用来保存消费数据
const expendArr = ref([]);
//定义加载消费数据的方法
const loadExpend = ()=>{
  let data = qs.stringify(selectExpendForm.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/expend/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      expendArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义重置搜索的方法
const resetSearch = ()=>{
  selectExpendForm.value = {};
  loadExpend();
}
//定义加载账户的方法
onMounted(()=>{
  loadExpend();
})
</script>


<style scoped>

</style>